<template>
	<view class="content">
    <view class="addDeviceBoxOutside">
      <view class="topTitle">
        新增{{ choseDevice }}
      </view>
      <view class="topRadio">
        <view style="width: auto; margin: 0 auto;">
          <u-radio-group
            v-model="choseDevice"
            class="uRadioGGroup"
            @change="groupChange"
            placement="row">
            <u-radio
              @change="groupChange"
              v-for="(item, index) in radiolist"
              :key="index"
              activeColor="red"
              :label="item.name"
              :name="item.name"
              size="40"
              iconSize="34"
              labelSize="40"></u-radio>
          </u-radio-group>
        </view>
      </view>
      <view class="innerContent" v-show="choseDevice === '开关设备'">
        <u--form
          :labelWidth="200"
          labelPosition="left"
          :model="modelSwich"
          :rules="rulesSwich"
          ref="uForm"
        >
          <u-form-item
            label="开关编号"
            prop="switchModel.value"
            borderBottom
            ref="item"
          >
            <u--input
              v-model="modelSwich.switchModel.value"
              placeholder="请输入编号"
              border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
            label="网关"
            prop="switchModel.gateway"
            @click="showSex = true"
            borderBottom
            ref="item"
          >
            <u--input
              v-model="modelSwich.switchModel.gateway"
              placeholder="请选择网关"
              disabled
              disabledColor="#ffffff"
              border="none"
            ></u--input>
            <u-icon
              slot="right"
              name="arrow-right"
            ></u-icon>
          </u-form-item>
          <view class="lastForSwitch">
            <view class="customButton" @click="submitSwitch">提交</view>
          </view>
        </u--form>
      </view>
      <view class="innerContent" v-show="choseDevice === '温湿度设备'">
        <u--form
          :labelWidth="200"
          labelPosition="left"
          :model="modelTah"
          :rules="rulesTah"
          ref="tahForm"
        >
          <u-form-item
            label="间隔单位/s"
            prop="tahModel.collectionInterval"
            borderBottom
            ref="item2"
          >
            <u--input
              v-model="modelTah.tahModel.collectionInterval"
              placeholder="请输入间隔单位"
              border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
            label="湿度下限告警"
            borderBottom
            ref="item2"
          >
            <u-radio-group
              v-model="modelTah.tahModel.enableHumLowerAlarm"
              @change="changeYes('a')"
              placement="row">
              <u-radio
                @change="changeYes('a')"
                v-for="(item, index) in radiolistChangeYes"
                :key="index"
                activeColor="red"
                :label="item.name"
                :name="item.name"
                size="30"
                iconSize="24"
                labelSize="30"></u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item
            label="湿度上限告警"
            borderBottom
            ref="item2"
          >
            <u-radio-group
              v-model="modelTah.tahModel.enableHumUpperAlarm"
              @change="changeYes('b')"
              placement="row">
              <u-radio
                @change="changeYes('b')"
                v-for="(item, index) in radiolistChangeYes"
                :key="index"
                activeColor="red"
                :label="item.name"
                :name="item.name"
                size="30"
                iconSize="24"
                labelSize="30"></u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item
            label="电量不足告警"
            borderBottom
            ref="item2"
          >
            <u-radio-group
              v-model="modelTah.tahModel.enableQuantityAlarm"
              @change="changeYes('c')"
              placement="row">
              <u-radio
                @change="changeYes('c')"
                v-for="(item, index) in radiolistChangeYes"
                :key="index"
                activeColor="red"
                :label="item.name"
                :name="item.name"
                size="30"
                iconSize="24"
                labelSize="30"></u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item
            label="温度下限告警"
            borderBottom
            ref="item2"
          >
            <u-radio-group
              v-model="modelTah.tahModel.enableTmpLowerAlarm"
              @change="changeYes('d')"
              placement="row">
              <u-radio
                @change="changeYes('d')"
                v-for="(item, index) in radiolistChangeYes"
                :key="index"
                activeColor="red"
                :label="item.name"
                :name="item.name"
                size="30"
                iconSize="24"
                labelSize="30"></u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item
            label="温度下限告警"
            borderBottom
            ref="item2"
          >
            <u-radio-group
              v-model="modelTah.tahModel.enableTmpUpperAlarm"
              @change="changeYes('e')"
              placement="row">
              <u-radio
                @change="changeYes('e')"
                v-for="(item, index) in radiolistChangeYes"
                :key="index"
                activeColor="red"
                :label="item.name"
                :name="item.name"
                size="30"
                iconSize="24"
                labelSize="30"></u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item
            label="湿警下限"
            prop="tahModel.humLowerLimit"
            borderBottom
            ref="item2"
          >
            <u--input
              v-model="modelTah.tahModel.humLowerLimit"
              placeholder="请输入湿警下限"
              border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
            label="湿警上限"
            prop="tahModel.humUpperLimit"
            borderBottom
            ref="item2"
          >
            <u--input
              v-model="modelTah.tahModel.humUpperLimit"
              placeholder="请输入湿警上限"
              border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
            label="设备id"
            prop="tahModel.id"
            borderBottom
            ref="item2"
          >
            <u--input
              v-model="modelTah.tahModel.id"
              placeholder="请输入设备id"
              border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
            label="设备名称"
            prop="tahModel.nickName"
            borderBottom
            ref="item2"
          >
            <u--input
              v-model="modelTah.tahModel.nickName"
              placeholder="请输入设备名称"
              border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
            label="超温采集间隔"
            prop="tahModel.overCollectionInterval"
            borderBottom
            ref="item2"
          >
            <u--input
              v-model="modelTah.tahModel.overCollectionInterval"
              placeholder="请输入超温采集间隔"
              border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
            label="超温上报间隔"
            prop="tahModel.overUploadInterval"
            borderBottom
            ref="item2"
          >
            <u--input
              v-model="modelTah.tahModel.overUploadInterval"
              placeholder="请输入超温上报间隔"
              border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
            label="电量告警阈值"
            prop="tahModel.quantityLimit"
            borderBottom
            ref="item2"
          >
            <u--input
              v-model="modelTah.tahModel.quantityLimit"
              placeholder="请输入电量告警阈值"
              border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
            label="报警下限温度"
            prop="tahModel.tmpLowerLimit"
            borderBottom
            ref="item2"
          >
            <u--input
              v-model="modelTah.tahModel.tmpLowerLimit"
              placeholder="请输入报警下限温度"
              border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
            label="报警上限温度"
            prop="tahModel.tmpUpperLimit"
            borderBottom
            ref="item2"
          >
            <u--input
              v-model="modelTah.tahModel.tmpUpperLimit"
              placeholder="请输入报警上限温度"
              border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
            label="上传间隔"
            prop="tahModel.uploadInterval"
            borderBottom
            ref="item2"
          >
            <u--input
              v-model="modelTah.tahModel.uploadInterval"
              placeholder="请输入上传间隔"
              border="none"
            ></u--input>
          </u-form-item>
          <u-form-item
            label="牧场"
            prop="modelTah.ranchId"
            @click="openRanchPopup"
            borderBottom
            ref="item"
          >
            <u--input
              v-model="modelTah.tahModel.ranchId"
              placeholder="请选择牧场"
              disabled
              disabledColor="#ffffff"
              border="none"
            ></u--input>
            <u-icon
              slot="right"
              name="arrow-right"
            ></u-icon>
          </u-form-item>
          <u-form-item
            label="圈棚"
            prop="tahModel.penId"
            @click="openPenPopup"
            borderBottom
            ref="item"
          >
            <u--input
              v-model="modelTah.tahModel.penId"
              placeholder="请选择圈棚"
              disabled
              disabledColor="#ffffff"
              border="none"
            ></u--input>
            <u-icon
              slot="right"
              name="arrow-right"
            ></u-icon>
          </u-form-item>
          <u-form-item
            label="栏舍"
            prop="tahModel.styId"
            @click="openStyPopup"
            borderBottom
            ref="item"
          >
            <u--input
              v-model="modelTah.tahModel.styId"
              placeholder="请选择栏舍"
              disabled
              disabledColor="#ffffff"
              border="none"
            ></u--input>
            <u-icon
              slot="right"
              name="arrow-right"
            ></u-icon>
          </u-form-item>
          <view class="lastForSwitch">
            <view class="customButton" @click="submitTah">提交</view>
          </view>
        </u--form>
      </view>
    </view>
    <u-action-sheet
      :show="showSex"
      :actions="gatewayArr"
      title="请选择网关"
      @close="showSex = false"
      @select="gatewaySelect"
    >
    </u-action-sheet>
    <u-action-sheet
      :show="showRanch"
      :actions="ranchList"
      title="请选择牧场"
      @close="showRanch = false"
      @select="ranchSelect"
    >
    </u-action-sheet>
    <u-action-sheet
      :show="showpen"
      :actions="penList"
      title="请选择圈棚"
      @close="showpen = false"
      @select="penSelect"
    >
    </u-action-sheet>
    <u-action-sheet
      :show="showSty"
      :actions="styList"
      title="请选择栏舍"
      @close="showSty = false"
      @select="stySelect"
    >
    </u-action-sheet>
	</view>
</template>

<script>
  import request from './../../request/api';
	export default {
		data() {
			return {
        showRanch: false,
        ranchList: [],
        tagRanchId: '',
        showpen: false,
        penList: [],
        tagPenId: '',
        showSty: false,
        styList: [],
        tagStyId: '',
        modelTah: {
          tahModel: {
            collectionInterval:'',
            enableHumLowerAlarm: '是', // 请选择湿度下限告警
            enableHumUpperAlarm: '是', // 请选择湿度上限告警
            enableQuantityAlarm: '是', // 请选择电量不足告警
            enableTmpLowerAlarm: '是', // 请选择温度下限告警
            enableTmpUpperAlarm: '是', // 请选择温度上限告警
            humLowerLimit: '', // 请输入湿警下限
            humUpperLimit: '', // 请输入湿警上限
            id: '', // 设备id
            nickName: '',// 请输入设备名称
            overCollectionInterval: '', // 请输入超温采集间隔
            overUploadInterval: '', // 请输入超温上报间隔
            quantityLimit: '', // 请输入电量告警阈值
            tmpLowerLimit: '', // 请输入报警下限温度
            tmpUpperLimit: '', // 请输入报警上限温度
            uploadInterval: '', // 请输入上传间隔
            ranchId:'',
            penId:'',
            styId:''
          }
        },
        rulesTah: {
          'tahModel.collectionInterval': {
            type: 'string',
            required: true,
            message: '请填写间隔单位',
            trigger: ['blur', 'change']
          },
          'tahModel.humLowerLimit': {
            type: 'string',
            required: true,
            message: '请输入湿警下限',
            trigger: ['blur', 'change']
          },
          'tahModel.humUpperLimit': {
            type: 'string',
            required: true,
            message: '请填写湿警上限',
            trigger: ['blur', 'change']
          },
          'tahModel.id': {
            type: 'string',
            required: true,
            message: '请填写设备id',
            trigger: ['blur', 'change']
          },
          'tahModel.nickName': {
            type: 'string',
            required: true,
            message: '请填写设备名称',
            trigger: ['blur', 'change']
          },
          'tahModel.overCollectionInterval': {
            type: 'string',
            required: true,
            message: '请填写超温采集间隔',
            trigger: ['blur', 'change']
          },
          'tahModel.overUploadInterval': {
            type: 'string',
            required: true,
            message: '请填写超温上报间隔',
            trigger: ['blur', 'change']
          },
          'tahModel.quantityLimit': {
            type: 'string',
            required: true,
            message: '请填写电量告警阈值',
            trigger: ['blur', 'change']
          },
          'tahModel.tmpLowerLimit': {
            type: 'string',
            required: true,
            message: '请填写报警下限温度',
            trigger: ['blur', 'change']
          },
          'tahModel.tmpUpperLimit': {
            type: 'string',
            required: true,
            message: '请填写报警上限温度',
            trigger: ['blur', 'change']
          },
          'tahModel.uploadInterval': {
            type: 'string',
            required: true,
            message: '请填写上传间隔',
            trigger: ['blur', 'change']
          },
          'tahModel.ranchId': {
            type: 'string',
            required: true,
            message: '请选择网关',
            trigger: ['blur', 'change']
          },
          'tahModel.penId': {
            type: 'string',
            required: true,
            message: '请选择网关',
            trigger: ['blur', 'change']
          },
          'tahModel.styId': {
            type: 'string',
            required: true,
            message: '请选择网关',
            trigger: ['blur', 'change']
          }
          
        },
        showSex: false,
        gatewayArr: [],
        radiolistChangeYes: [
          {
            name: '是'
          },
          {
            name: '否'
          }
        ],
        choseDevice:'开关设备',
        modelSwich: {
          switchModel :{
            value:'',
            gateway: ''
          }
        },
        rulesSwich: {
          'switchModel.value': {
            type: 'string',
            required: true,
            message: '请填写编号',
            trigger: ['blur', 'change']
          },
          'switchModel.gateway': {
            type: 'string',
            required: true,
            message: '请选择网关',
            trigger: ['blur', 'change']
          }
        },
        radiolist: [
          {
            name: '开关设备'
          },
          {
            name: '温湿度设备'
          }
        ],
        myGetwayId: '',
        enableHumLowerAlarmVal: 1,
        enableHumUpperAlarmVal: 1,
        enableQuantityAlarmVal: 1,
        enableTmpLowerAlarmVal: 1,
        enableTmpUpperAlarmVal: 1
			}
		},
    onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    	this.$refs.uForm.setRules(this.rulesSwich)
    	this.$refs.tahForm.setRules(this.rulesTah)
    },
		onLoad() {
      
		},
    onShow(){
      this.getGetwayListAllin()
    },
		methods: {
      ranchSelect(e){
        this.modelTah.tahModel.ranchId = e.name
        this.tagRanchId = e.id
      },
      penSelect(e){
        this.modelTah.tahModel.penId = e.penName
        this.tagPenId = e.id
      },
      stySelect(e){
        this.modelTah.tahModel.styId = e.styName
        this.tagStyId = e.id
      },
      openRanchPopup(){
        this.getRanchList()
      },
      openPenPopup(){
        if (this.tagRanchId === '') {
          uni.$u.toast('请先选择牧场')
        } else {
          this.getPenList()
        }
      },
      openStyPopup(){
        if (this.tagPenId === '') {
          uni.$u.toast('请先选择圈棚')
        } else {
          this.getStyList()
        }
      },
      getRanchList(){
        const ranObj = {
          url: '/ranch/ranchList',
          method: 'GET',
        }
        request(ranObj).then(res => {
          if (res.code === '200') {
            this.ranchList = res.data
            this.showRanch = true
          } else {
            uni.$u.toast(res.message)
          }
        })
      },
      getPenList(){
        const penObj = {
          url: '/pen/penList',
          method: 'GET',
          data: {
            ranchId: this.tagRanchId
          }
        }
        request(penObj).then(res => {
          if (res.code === '200') {
            this.penList = res.data
            this.showpen = true
          } else {
            uni.$u.toast(res.message)
          }
        })
      },
      getStyList(){
        const penObj = {
          url: '/sty/styList',
          method: 'GET',
          data: {
            penId: this.tagPenId
          }
        }
        request(penObj).then(res => {
          if (res.code === '200') {
            this.styList = res.data
            this.showSty = true
          } else {
            uni.$u.toast(res.message)
          }
        })
      },
      // 切换选择
      changeYes(val){
        if (val === 'a') {
          this.enableHumLowerAlarmVal = this.modelTah.tahModel.enableHumLowerAlarm === '否' ? 0 : 1
        } else if(val === 'b') {
          this.enableHumUpperAlarmVal = this.modelTah.tahModel.enableHumUpperAlarm === '否' ? 0 : 1
        } else if(val === 'c') {
          this.enableQuantityAlarmVal = this.modelTah.tahModel.enableQuantityAlarm === '否' ? 0 : 1
        } else if(val === 'd') {
          this.enableTmpLowerAlarmVal = this.modelTah.tahModel.enableTmpLowerAlarm === '否' ? 0 : 1
        } else if(val === 'e') {
          this.enableTmpUpperAlarmVal = this.modelTah.tahModel.enableTmpUpperAlarm === '否' ? 0 : 1
        } 
        
      },
      // 获取网关列表
      getGetwayListAllin(){
        const getwayObj = {
          url: '/switchGateway/allList',
          method: 'GET',
        }
        request(getwayObj).then(res => {
          if(res.code === '200') {
            this.gatewayArr = res.data
          } else {
            uni.$u.toast(res.message)
          }
        })
      },
      // 新增开关
      submitSwitch(){
        this.$refs.uForm.validate().then(resLgo => {
          const switchObj = {
            url: '/switchGateway/allList',
            method: 'GET',
            data: {
              gatewayId: this.myGetwayId,
              num: this.modelSwich.switchModel.value,
            }
          }
          request(switchObj).then(result => {
            if (result.code === '200') {
              uni.$u.toast(result.message)
              setTimeout(() => {
                this.modelSwich.switchModel.value = ''
                this.modelSwich.switchModel.gateway = ''
              }, 500);
            } else {
              uni.$u.toast(result.message)
            }
          })
        }).catch(errors => {
          uni.$u.toast('校验失败')
        })
      },
      // 新增温湿度
      submitTah(){
        this.$refs.tahForm.validate().then(resLog => {
          let useObj = {
            url: '/tahDevice/add',
            method: 'POST',
            data: {
              collectionInterval: parseInt(this.modelTah.tahModel.collectionInterval),
              enableHumLowerAlarm: this.enableHumLowerAlarmVal,
              enableHumUpperAlarm: this.enableHumUpperAlarmVal,
              enableQuantityAlarm: this.enableQuantityAlarmVal,
              enableTmpLowerAlarm: this.enableTmpLowerAlarmVal,
              enableTmpUpperAlarm: this.enableTmpUpperAlarmVal,
              humLowerLimit: parseInt(this.modelTah.tahModel.humLowerLimit),
              humUpperLimit: parseInt(this.modelTah.tahModel.humUpperLimit),
              id: parseInt(this.modelTah.tahModel.id),
              nickName: this.modelTah.tahModel.nickName,
              overCollectionInterval: parseInt(this.modelTah.tahModel.overCollectionInterval),
              overUploadInterval: parseInt(this.modelTah.tahModel.overUploadInterval),
              penId: parseInt(this.tagPenId),
              quantityLimit: parseInt(this.modelTah.tahModel.quantityLimit),
              ranchId: parseInt(this.tagRanchId),
              styId: parseInt(this.tagStyId),
              tmpLowerLimit: parseInt(this.modelTah.tahModel.tmpLowerLimit),
              tmpUpperLimit: parseInt(this.modelTah.tahModel.tmpUpperLimit),
              uploadInterval: parseInt(this.modelTah.tahModel.uploadInterval)
            }
          }
          request(useObj).then(res => {
            if (res.code === '200') {
              uni.$u.toast(res.message)
            } else {
              uni.$u.toast(res.message)
            }
          })
          
        }).catch(errors => {
          uni.$u.toast('校验失败')
        })
      },
      gatewaySelect(e){
        this.modelSwich.switchModel.gateway = e.id
        this.myGetwayId = e.id
      },
      groupChange(n){
        this.choseDevice = n
      },
      closePopup (){
        this.showPopupFir = true
        this.showPopup = false
      },
      open(){},
		}
	}
</script>

<style lang="scss" scoped>

.addDeviceBoxOutside {
  width: 96%;
  padding: 30rpx 2%;
  height: auto;
  font-size: 30rpx;
}
.topRadio {
  display: flex;
  justify-content: center;
}
.uRadioGGroup {
  justify-content: center;
}
.lastForSwitch {
  margin-top: 30rpx;
  width: 100%;
  display: flex;
  justify-content: center;
  .customButton {
    width: 90%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 10rpx;
    background-color: #3c9cff;
    color: #fff;
  }
}
.topTitle {
  width: 100%;
  height: 100rpx;
  text-align: center;
  font-size: 36rpx;
  font-weight: 600;
} 
.innerContent {
  width: 100%;
  height: auto;
}
.u-form-item__body__left {
  width: 258rpx;
}
</style>
